<template>
  <common-view ref="commonView" :SearchSet="searchSet" :SearchForm="searchForm" :SearchData="searchData"
    :TableSet="tableSet" :Columns="columns" :DialogSet="dialogSet" :DialogFormData="dialogFormData"
    :DialogForm="dialogForm" :RequestController="requestController" :DataList="dataList"
    @handleQueryCallBack="handleQueryCallBack" @addCallBack="addCallBack" @updateCallBack="updateCallBack"
    @deleteCallBack="deleteCallBack"></common-view>
</template>
<script>
import CommonView from "@/components/common/CommonView.vue";

export default {
  components: {
    CommonView,
  },
  data() {
    return {
      //页面组件配置
      //===================================================//
      //搜索框按钮
      //搜索框及搜索按钮是否展示
      searchSet: {
        searchButtenShow: true,
        labelWidth: "120px",
      },
      //搜索框配置及数据
      searchData: {
        g_name: "",
      },
      searchForm: [
        {
          type: "Input",
          label: "喷水器组编号",
          prop: "sk_number",
          width: "200px",
          placeholder: "喷水器组编号...",
          enternative: this.handleQuery, //按下enter执行的函数
        },
        {
          type: "Select",
          label: "喷水器组类型",
          prop: "sk_type",
          width: "200px",
          options: [
            { value: "verticalSmall", label: "垂直小喷头" },
            { value: "verticalBig", label: "垂直大喷头" },
            { value: "levelLeft", label: "水平左喷头" },
            { value: "levelRight", label: "水平右喷头" },
          ],
          change: function (value) {
            // console.log(value);
          },
        },
      ],
      //表格相关配置
      tableSet: {
        selection: true, //是否显示多选框
        showKey: true, //显示索引列
        idColum: "sk_id", //（id）主键列名称
      },
      //表格表头数据
      //Object.freeze 百度去理解 提升性能并且禁止对于该对象的属性进行修改（
      columns: Object.freeze([
        {
          sortable: true,
          attrs: {
            prop: "sk_number",
            label: "喷水器组编号",
            // width: "140",
            align: "center",
            // "show-overflow-tooltip": true,
          },
        },
        {
          sortable: true,
          formatter: (value) => {
            if (value == "verticalSmall") {
              return "垂直小喷头";
            } else if (value == "verticalBig") {
              return "垂直大喷头";
            } else if (value == "levelLeft") {
              return "水平左喷头";
            } else if (value == "levelRight") {
              return "水平右喷头";
            }
          },
          attrs: {
            prop: "sk_type",
            label: "类型",
            // width: "140",
            align: "center",

            // "show-overflow-tooltip": true,
          },
        },
        {
          sortable: true,
          attrs: {
            prop: "sk_exhaust",
            label: "是否排空",
            // width: "140",
            align: "center",
            // "show-overflow-tooltip": true,
          },
        },
      ]),
      //新增编辑弹出框相关配置
      dialogSet: {
        title: "喷水组",
        isEdit: false,
        dialogVisible: false,
      },
      //新增编辑相关信息
      dialogFormData: { sk_number: "", sk_type: "", sk_level_space:undefined,sk_exhaust: "" },
      //新增编辑form
      dialogForm: {
        labelWidth: "120px",
        inline: false,
        labelPosition: "right",
        size: "small",
        formItem: [
          {
            type: "text",
            label: "喷水器组编号",
            width: "200px",
            prop: "sk_number",
            size: "small",
            isDisabled: false,
            rules: [
              {
                required: true,
                message: "请输入喷水器组编号",
                trigger: "blur",
              },
              {
                min: 1,
                max: 15,
                message: "长度在 1 到 15 个字符",
                trigger: "blur",
              },
            ],
          },
          {
            type: "select",
            label: "喷水器组类型",
            width: "200px",
            prop: "sk_type",
            size: "small",
            isDisabled: false,
            multiple: false,
            tip: "",
            value: "",
            options: [
              { value: "verticalSmall", label: "垂直小喷头" },
              { value: "verticalBig", label: "垂直大喷头" },
              { value: "levelLeft", label: "水平左喷头" },
              { value: "levelRight", label: "水平右喷头" },
            ],
            required: true,
          },
          {
            type: "text",
            label: "喷水器水平位置",
            width: "200px",
            prop: "sk_level_space",
            placeholder:"水平位置",
            size: "small",
            isDisabled: false,
            rules: [
                { type: 'number', message: '请填写数字', trigger: 'blur', transform: (value) => Number(value)}
            ],
          },
          {
            type: "select",
            label: "喷水器组排空",
            width: "200px",
            prop: "sk_exhaust",
            size: "small",
            isDisabled: false,
            multiple: false,
            tip: "",
            value: "",
            options: [
              { value: 1, label: "已排空" },
              { value: 0, label: "未排空" },
            ],
            required: true,
          },
        ],
      },
      downloadLoading: false,
      dataList: [],

      //页面逻辑参数等
      //=======================================================//
      //选中的行
      requestController: "sprinkler",
    };
  },
  mounted: function () {},
  methods: {
    handleQuery() {
      this.$refs.commonView.handleQuery();
    },
    //修正返回表格list数据(访问list返回成功回调)
    handleQueryCallBack(res) {
      this.dataList = res.bodyList;
      this.dataList.forEach((item) => {
        if (item.sk_exhaust == 1) {
          item.sk_exhaust = "已排空";
        }
        if (item.sk_exhaust == 0) {
          item.sk_exhaust = "未排空";
        }
      });
    },
    ///新增回调
    addCallBack(res) {},
    //更新回调
    updateCallBack(res) {},
    //删除回调
    deleteCallBack(res) {},
    Export() {
      this.downloadLoading = true;
      // this.downloadLoading=false;
    },
  },
};
</script>
<style lang="scss">
.el-form-item {
  margin-bottom: 0px;
}
</style>
